<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<script type="text/javascript"  src="${ctx}/static/js/si.ajax.js"></script>
<!--可搜索下拉框-start-->
<link rel="stylesheet" href="${ctx}/static/ace/css/chosen.css" />
<link rel="stylesheet" href="${ctx}/static/ace/css/ace.min.css" />
<link rel="stylesheet" href="${ctx}/static/ace/css/ace-rtl.min.css" />
<link rel="stylesheet" href="${ctx}/static/ace/css/ace-skins.min.css" />
<script type="text/javascript" src="${ctx}/static/ace/js/chosen.jquery.min.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/jquery.selectlistactions.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//搜索框
/* 		$('#source').filterByText($('#filter_source'), true);
		$('#destination').filterByText($('#filter_destination'), true); */

		$('#source').on('change', '', function(e) {
			var len = $('#source').find("option:selected").length;
			if (len != 0) {
				$('#btnRight').attr("disabled", false);
			} else {
				$('#btnRight').attr("disabled", true);
			}
		});

		$('#destination').on('change', '', function(e) {
			var len = $('#destination').find("option:selected").length;
			if (len != 0) {
				$('#btnLeft').attr("disabled", false);
			} else {
				$('#btnLeft').attr("disabled", true);
			}
		});
	})
	
	function toRight() {
		$('select').moveToListAndDelete('#source', '#destination');
		disableButtons();
		
	}
	
	function toLeft() {
		$('select').moveToListAndDelete('#destination', '#source');
		disableButtons();
		e.preventDefault();
	}
	
	function disableButtons() {
		var lengthOfLeftSelected = $('#source').find("option:selected").length;
		var lengthOfRightSelected = $('#destination').find("option:selected").length;

		if (lengthOfLeftSelected != 0) {
			$('#btnRight').attr("disabled", false);
		} else {
			$('#btnRight').attr("disabled", true);
		}

		if (lengthOfRightSelected != 0) {
			$('#btnLeft').attr("disabled", false);
		} else {
			$('#btnLeft').attr("disabled", true);
		}
	}
	
	function saveTables() {
		var tables = [];

		$('#destination').find("option").each(function() {
			var table = {};
			table.tableId = $(this).val();
			table.tableName = $(this).text();
			table.tableType = $(this).attr("isIc");
			tables.push(table);
		});
		
		$('#content')[0].contentWindow.showTables(tables);
		
		
	}
</script>
	<div class="modal-body overflow-visible">
					<div class="row">
						<div class="col-sm-12">
							<div class="col-md-5">
								<h4>
									<span class="unselected-title">可选表</span>
								</h4>
								<!-- <input id="filter_source"
									class="filter form-control filter-unselected" type="text"
									placeholder="请输入查询条件..." style="margin-bottom: 5px;">  -->
								<select
									id="source" class="unselected form-control dual_select" table_select
									style="height: 200px; width: 100%;" multiple="multiple">
									
									<c:forEach var="table" items="${tableList}">
										<option value="${table.id}" isIc="${table.tableType}">${table.tableName}</option>
									</c:forEach>
					
								</select>
							</div>
					
							<div class="col-md-2 text-center"
								style="margin-top: 100px; text-align: center;">
								<!-- <button type="button" id="btnAllRight" class="btn btn-white col-md-8 col-md-offset-2" style="margin-bottom: 10px; margin-left: 30px;" disabled="">>></button><br> -->
								<button type="button" id="btnRight" onclick="toRight();"
									class="btn btn-white col-md-8 col-md-offset-2"
									style="margin-bottom: 10px; margin-left: 30px;" disabled="">>
								</button>
								<br>
								<button type="button" id="btnLeft" onclick="toLeft();"
									class="btn btn-white col-md-8 col-md-offset-2"
									style="margin-bottom: 10px; margin-left: 30px;" disabled=""><
								</button>
								<br>
								<!-- <button type="button" id="btnAllLeft" class="btn btn-white col-md-8 col-md-offset-2" style="margin-bottom: 10px; margin-left: 30px;" disabled=""> << </button><br> -->
							</div>
					
							<div class="col-md-5">
								<h4>
									<span class="selected-title">已选表</span>
								</h4>
								<!-- <input id="filter_destination"
									class="filter form-control filter-selected" type="text"
									placeholder="请输入查询条件..." style="margin-bottom: 5px;">  -->
								<select
									id="destination" class="selected form-control dual_select"
									style="height: 200px; width: 100%;" multiple="multiple" name="">
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button id="where-save" tableId="${ic.tableId}" type="button" class="btn btn-sm btn-info" onclick="saveTables();">
						<i class="icon-ok bigger-110"></i>&nbsp;&nbsp;&nbsp;&nbsp;保存&nbsp;&nbsp;
					</button>
							
					<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">
						<i class="icon-remove bigger-110"></i>&nbsp;&nbsp;&nbsp;&nbsp;关闭&nbsp;&nbsp;
					</button>
        		</div>